Multiprogress

The multiProgress is a progress tracker with multiple progress bars that stimulate finding best plan. At certain points, it can prompt the user with a Yes/No question to add more interactivity.

Step Config

Key	Description	Is Optional?
type	Should be multiProgress to differs from other steps	Required
stepId	Unique step identifier.	Required
backgroundColor	The background color of the page.	Optional
title	Header text to show on top of the step.	Required
titleColor	Color of the title.	Optional
subtitle	Text to show below the progress bars.	Required
subtitleColor	Color of the subtitle.	Optional
useHTML	Whether the entered content will be contain HTML tags like <strong/> or plain text.	Optional
dotsColor	Dots in which represents undone bar color.	Optional
hideOverlay	Whether to hide the prompt overlay or not.	Optional
bars	The progress bars to be added. Max 7 bars can be added	Required
hideProgressBar	Boolean to hide the progress bar on that step if needed.	Optional

Bar Config

Name	Description	Is Optional?
label	Text that will added inside the progress bar.	Required
labelColor	Color of the label.	Required
backgroundColorFilled	The fill color of progress.	Required
backgroundColorEmpty	The fill color of no progress.	Optional
borderColorEmpty	Border color of progress bar.	Required
animation	array the describes the progress animation.	Required

Animation Config

Name	Description	Is Optional?
to	The percentage in which the progress should advance to in this step	Required
duration	Animation duration.	Required
delay	Delay before animation starts.	Required
prompt	Prompt popup at the end of the animation.	Optional

Prompt Config

Name	Description	Is Optional?
image	Image to be added to the prompt.	Required
imageWidth	The prompt’s image width	Optional
title	Prompt question.	Required
titleColor	Prompt question title.	Required
backgroundColor	Background color of prompt popup.	Required
choices	Answers that the user might choose. Max 2 choices.	Required

Choices Config

Name	Description	Is Optional?
text	Answer text.	Required
color	Answer text color.	Required
backgroundColor	Button background color.	Required
hoverBackgroundColor	Button background color on mouse hover.	Required
hoverColor	The text color on hovering a choice.	Optional

Example

Multi-progress (step between interstitial steps)

{
  "id": "mind_app_id",
  "journeyId": "SaDJUYAjRv",
  "language": "en",
  "appId": "co.thefab.mind",
  "seo": {
    "title": "Lumiere",
    "favicon": "https://c.thefab.co/web-onboarding/mind/mind-favicon.png",
    "description": "Manage stress and anxiety through self-care practices and empowering affirmations. Embark on a journey of self-love."
  },
  "steps": [
    {
      "type": "interstitial",
      "stepId": "psychological_flexibility",
      "config": {
        "id": "psychological_flexibility",
        "title": "",
        "image": "https://c.thefab.co/web-onboarding/mind/inter_infographic_elixir_opt.webp",
        "color_cta": "#003788",
        "color_cta_button": "#FFFFFF",
        "showButtonsDelay": 300,
        "subtitle": "",
        "hide_close_icon": true,
        "mode": "BOLD",
        "color_background": "#003788",
        "cta": "Continue",
        "textColor": "#FFFFFF"
      }
    },
    {
      "stepId": "multi-progress-step",
      "type": "multiProgress",
      "title": "Charting Best Fit Plan",
      "titleColor": "black",
      "backgroundColor": "white",
      "subtitle": "Sit tight! We're building your perfect plan, based on millions of data points from successful Fabulous users",
      "subtitleColor": "gray",
      "useHTML": false,
      "bars": [
        {
          "label": "Healthy Habits Data",
          "labelColor": "#FF5C45",
          "backgroundColorFilled": "linear-gradient(90deg, #FF8B45 0%, #FF5C45 100%)",
          "borderColorEmpty": "#FFE1D8",
          "animation": [
            { "to": 25, "duration": 500, "delay": 1000 },
            {
              "to": 50,
              "duration": 500,
              "delay": 1000,
              "prompt": {
                "image": "https://storage.googleapis.com/c.thefab.co/web-onboarding/fabulous/book_icecream.png",
                "title": "Do you have a habit you're trying to break?",
                "titleColor": "#14191D",
                "backgroundColor": "#FFF",
                "choices": [
                  {
                    "text": "Yes",
                    "color": "#FFFFF",
                    "backgroundColor": "#3425B8",
                    "hoverBackgroundColor": "#251990"
                  },
                  {
                    "text": "No",
                    "color": "#332BB0",
                    "backgroundColor": "#ECEAFF",
                    "hoverBackgroundColor": "#CFCDE3"
                  }
                ]
              }
            },
            { "to": 75, "duration": 500, "delay": 1000 },
            { "to": 100, "duration": 500, "delay": 1000 }
          ]
        },
        {
          "label": "Users performance",
          "labelColor": "#376FFF",
          "backgroundColorFilled": "linear-gradient(90deg, #376FFF 0%, #342AC1 100%)",
          "borderColorEmpty": "#D5E1FF",
          "animation": [
            {
              "to": 50,
              "duration": 500,
              "delay": 1000,
              "prompt": {
                "image": "https://storage.googleapis.com/c.thefab.co/web-onboarding/fabulous/book_icecream.png",
                "title": "Do you have a habit you're trying to break?",
                "titleColor": "#14191D",
                "backgroundColor": "#FFF",
                "choices": [
                  {
                    "text": "Yes",
                    "color": "#FFFFF",
                    "backgroundColor": "#3425B8",
                    "hoverBackgroundColor": "#251990"
                  },
                  {
                    "text": "No",
                    "color": "#332BB0",
                    "backgroundColor": "#ECEAFF",
                    "hoverBackgroundColor": "#CFCDE3"
                  }
                ]
              }
            },
            { "to": 75, "duration": 500, "delay": 1000 },
            { "to": 100, "duration": 500, "delay": 1000 }
          ]
        },
        {
          "label": "Morning Routine Ideas",
          "labelColor": "#E563B2",
          "backgroundColorFilled": "linear-gradient(90deg, #E563B2 0%, #D60F88 100%)",
          "borderColorEmpty": "#FFE3ED",
          "animation": [
            { "to": 25, "duration": 500, "delay": 1000 },
            { "to": 75, "duration": 500, "delay": 1000 },
            { "to": 100, "duration": 500, "delay": 1000 }
          ]
        },
        {
          "label": "Afternoon Routine Ideas",
          "labelColor": "#62942A",
          "backgroundColorFilled": "linear-gradient(90deg, #62942A 0%, #006F3F 100%)",
          "borderColorEmpty": "#E5F3D8",
          "animation": [
            { "to": 25, "duration": 500, "delay": 1000 },
            { "to": 50, "duration": 500, "delay": 1000 },
            { "to": 75, "duration": 500, "delay": 1000 },
            { "to": 100, "duration": 500, "delay": 1000 }
          ]
        },
        {
          "label": "Evening Routine Ideas",
          "labelColor": "#25B5C1",
          "backgroundColorFilled": "linear-gradient(90deg, #25B5C1 0%, #00679F 100%)",
          "borderColorEmpty": "#DDF3F5",
          "animation": [
            { "to": 25, "duration": 500, "delay": 1000 },
            { "to": 50, "duration": 500, "delay": 1000 },
            { "to": 75, "duration": 500, "delay": 1000 },
            { "to": 100, "duration": 500, "delay": 1000 }
          ]
        },
        {
          "label": "Behaviour Change Data",
          "labelColor": "#FFA800",
          "backgroundColorFilled": "linear-gradient(90deg, #FFA800 0%, #F68300 100%)",
          "borderColorEmpty": "#FFF0D2",
          "animation": [
            { "to": 25, "duration": 500, "delay": 1000 },
            { "to": 50, "duration": 500, "delay": 1000 },
            { "to": 75, "duration": 500, "delay": 1000 },
            { "to": 100, "duration": 500, "delay": 1000 }
          ]
        },
        {
          "label": "Demographic profile",
          "labelColor": "#5942EF",
          "backgroundColorFilled": "linear-gradient(90deg, #5942EF 0%, #342AC1 100%)",
          "borderColorEmpty": "#E2E4FF",
          "animation": [
            { "to": 25, "duration": 500, "delay": 1000 },
            { "to": 50, "duration": 500, "delay": 1000 },
            { "to": 75, "duration": 500, "delay": 1000 },
            { "to": 100, "duration": 500, "delay": 1000 }
          ]
        }
      ]
    },
    {
      "type": "interstitial",
      "stepId": "psychological_flexibility",
      "config": {
        "id": "psychological_flexibility",
        "title": "",
        "image": "https://c.thefab.co/web-onboarding/mind/inter_infographic_elixir_opt.webp",
        "color_cta": "#003788",
        "color_cta_button": "#FFFFFF",
        "showButtonsDelay": 300,
        "subtitle": "",
        "hide_close_icon": true,
        "mode": "BOLD",
        "color_background": "#003788",
        "cta": "Continue",
        "textColor": "#FFFFFF"
      }
    }
  ],
  "logic": []
}